<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>我的旅遊</title>
	<meta name="viewport" content="initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="./css/sm.css">
	<link rel="stylesheet" href="./css/animate.css" type="text/css">
	<link rel="stylesheet" href="./css/toastr.min.css" type="text/css">
	<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
	<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
	<link rel="stylesheet" href="./css/index.css"/>

	<script type='text/javascript' src='./js/jquery-2.2.0.min.js' charset='utf-8'></script>
	<script type='text/javascript' src='./js/zepto.min.js' charset='utf-8'></script>
	<script type='text/javascript' src='./js/sm.min.js' charset='utf-8'></script>
	<script type="text/javascript" src="./js/jquery.touchSwipe.min.js"></script>
	<script type="text/javascript" src="./js/jquery.raty.min.js"></script>
	<script type="text/javascript" src="./js/toastr.min.js"></script>
	
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=e843bab8ae313a72cea9ed68ef713efd"></script> 
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>

    <script type="text/javascript" src="./js/main.js"></script>
</head>
<body>
	<div class="page-group">
		<div class="page">
			<header class="bar bar-nav">
				<a id="menu-icon" class="icon icon-menu"></a>
				<div class="searchbar">
					<a class="searchbar-cancel">取消</a>
					<div class="search-input">
						<label class="icon icon-search" for="search"></label>
						<input type="search" id='search' placeholder='搜索景點或商鋪'/>
					</div>
				</div>
			</header>
			<div class="bar bar-header-third menu" id="menu">

			</div>

			<div class="content">
				<!-- 这里是页面内容区 -->
				<div id="container" tabindex="0"></div>
				<div id="panel"></div>
			</div>
			<!-- About Popup -->
			<div class="popup popup-detail">
				<div class="content-block">
				<audio id="mp3" loop>			
					Your browser does not support the audio element.</audio>
					<img src="img/voice.png" id="speaker">
					<div style="width: 300px">
						<img src="img/i-f7.png" id="spot_detail_image">
						<div style="margin-left: 150px"><p id="spot_detail_name">惠陵</p><div id="spot_detail_star"></div></div>

					</div>
					<div id="spot_detail_title">景区介绍</div>
					<p id="spot_detail_introduce">这是简介！这是简介！这是简介！这是简介！这是简介！这是简介！这是简介！
					这是简介！这是简介！这是简介！这是简介！这是简介！这是简介！这是简介！
					这是简介！这是简介！这是简介！这是简介！这是简介！这是简介！这是简介！
					这是简介！这是简介！这是简介！这是简介！这是简介！这是简介！这是简介！<br /><br /><br /></p>
				</div>
			</div>
		</div>

	</div>

	<script>
		Zepto.init();
		var isShowMenu = false;
		var base_url = "../../";
		var uuid = getUUID();
		$(document).ready(function(){
			$(".menu").css("opacity","1")
			//点击菜单按钮，出现菜单栏
 			$("#menu-icon").click(function(){
 				toggleMenu()
			});
 			//点击搜索栏，出现菜单栏与历史记录
			$('#search').click(function() {
				toggleMenu()
			})
			$('.searchbar-cancel').click(function() {
				//菜单栏显示中，现在关闭
 				isShowMenu = false;
 				$('#menu-icon').removeClass("icon-up")
 				$('#menu-icon').addClass("icon-menu")
    			$('.menu').animateCss('flipOutX',hideEnd);
			})
			$("#search").keypress(function(e) {
				var key = e.which;
				if (key == 13) {
					searchSpotList(uuid,$("#search").val())
				}
			})
			removePoint();
			alwaysCheckBoardcast();
			getSpotType(uuid,function() {
				getSpotList(uuid,0,-1,1);
				getWeather(uuid); 
			});
			

		});

		function alwaysCheckBoardcast() {
			getBroadcast();
			setTimeout("alwaysCheckBoardcast()",10000);
		}

		$("#speaker").click(function () {
			togglePlayPause();
		})
		function togglePlayPause() {
		   var mp3 = document.getElementById("mp3");
		   if (mp3.paused || mp3.ended) {
		   		console.log("mp3 played");
		      	mp3.play();
		   } else {
		   		console.log("mp3 paused");
		      	mp3.pause();
		   }
		}

		function toggleMenu() {
			if (isShowMenu) {
				//菜单栏显示中，现在关闭
				isShowMenu = false;
				$('#menu-icon').removeClass("icon-up")
				$('#menu-icon').addClass("icon-menu")
				$('.menu').animateCss('flipOutX',hideEnd);
			}else {
				//菜单栏关闭中，现在显示
				isShowMenu = true;
				$('#menu-icon').addClass("icon-up")
				$('#menu-icon').removeClass("icon-menu")
				// $('.menu').css("opacity","1")
				$('.menu').css("z-index","11")
				$('.menu').animateCss('flipInX',showEnd);
			}
		}
		function showEnd() {
			
		}
		function hideEnd() {
			$('.menu').css("z-index","-1")
		}

// 滑动事件
		$(function() {
  			$(".popup").swipe( {
    			//上滑，下滑
    			swipe:function(event, direction, distance, duration, fingerCount, fingerData) { 
      				if (direction == "up") {
      					$('.popup.modal-in').css("-webkit-transform","translate3d(0, 0, 0)")
      					$('.popup.modal-in').css("transform","translate3d(0, 0, 0)")
      					// alert("confirm up")
      				}else if (direction == "down"){
      					//alert("confirm down")
      					Zepto.closeModal()
      					$('.popup.modal-out').css("-webkit-transform","translate3d(0, 100%, 0)")
      					$('.popup.modal-out').css("transform","translate3d(0, 100%, 0)")
      					
      				}
    			}
  			});
		});

	</script>
	<!-- 评分 -->
    <script type="text/javascript">
    	$.fn.raty.defaults.path = 'img';
    	$.fn.raty.defaults.width = '200px';
    	//$("#spot_detail_star").raty({score:3});
    </script>

	<script type="text/javascript">
		function getSpotDetail(device_id,id) {
			var sendData = new Object();
			sendData.device_id = device_id;
			sendData.id = id;
			var settings = ajax_package(base_url+"info/get_spot",
				sendData,
				function(data,textStatus) {
					console.log("data" + JSON.stringify(data));
					if (textStatus == "success") {
						$("#spot_detail_introduce").html(data.introduction);
						$("#spot_detail_name").text(data.name);
						$("#spot_detail_image").attr("src",getSpotImage(data.image));
						$('#spot_detail_star').raty({score:data.score});
						$('#mp3').attr("src",getSpotVoice(data.voice));
					}
				});
			$.ajax(settings);
		}
		function searchSpotList(device_id,key) {
			var sendData = new Object();
			sendData.device_id = device_id;
			sendData.key = key;
			var settings = ajax_package(base_url+"info/search_spot",
				sendData,
				function(data,textStatus) {
					console.log("data" + JSON.stringify(data));
					if (textStatus == "success") {
						map.remove(markers);
						makeMap(data);
						spots = data;
						console.log("spot: " + JSON.stringify(data));
			
					}
				});
			$.ajax(settings);
		}
		function getSpotImage(image_name) {
			return base_url + "static/image/spot/"+image_name;
		}
		function getSpotVoice(voice_name) {
			return base_url + "static/voice/spot/"+voice_name;
		}
		function getSpotImage(image_name) {
			return base_url + "static/image/spot/"+image_name;
		}
		function getSpotTypeImage(image_name) {
			return base_url + "static/image/spot_type/"+image_name;
		}
		
		function getWeatherImage(image_name) {
			return base_url + "static/image/weather/"+image_name;
		}
		function getSpotType(device_id,successed) {
			var sendData = new Object();
			sendData.device_id = device_id;
			var settings = ajax_package(base_url+"info/get_spot_type_list",
				sendData,
				function(data,textStatus) {
					if (textStatus == "success") {
						var contentStr = "";
						for (var i = 0; i < data.length; i++) {
							contentStr += '<div class="type_div">';
							contentStr += '<p class="type_id" style="display:none">'+data[i].id+'</p>'
							contentStr += '<img src="'+ getSpotTypeImage(data[i].image) +'">';
							contentStr += '<p>' + data[i].type + '</p>';
							contentStr += '</div>';
							//alert(data[i].type + "," + data[i].id + "," + data[i].image);
						}
						$("#menu").append(contentStr);
						$(".type_div").click(function(e) {
							console.log("id:"+$(this).children("p.type_id").text());
							getSpotList(uuid,0,-1,$(this).children("p.type_id").text());
						})

						addService();

						if (successed) {
							successed();
						}
					}
				});
			$.ajax(settings);
		}
		function addService() {
			var contentStr = "";
			contentStr += '<div class="type_div" id="service">';
			contentStr += '<img src="img/voice.png">';
			contentStr += '<p>服务</p>';
			contentStr += '</div>';
			$("#menu").append(contentStr);
			$("#service").click(function() {
				window.location.href = "./service.html";
			})
		}
		var spots;
		var type_list;
		function getSpotList(device_id,start,num,type_id) {
			console.log("good list");
			var sendData = new Object();
			sendData.device_id = device_id;
			sendData.start = start;
			sendData.num = num;
			sendData.type = type_id;
			var settings = ajax_package(base_url+"info/get_spot_list",
				sendData,
				function(data,textStatus) {
					if (textStatus == "success") {
						//remove the maker
						map.remove(markers);
						makeMap(data);
						spots = data;
						console.log("spot: " + JSON.stringify(data));
					}
				});
			$.ajax(settings);
		}
		function getBroadcast(device_id) {
			var sendData = new Object();
			sendData.device_id = device_id;
			var settings = ajax_package(base_url+"info/get_broadcast",
				sendData,
				function(data,textStatus) {
					console.log("data:"+data);
					if (data.length != 0) {
						toastr.info("景区广播：" + data);
					}
				});
			$.ajax(settings);
		}
		function getWeather(device_id) {
			var sendData = new Object();
			sendData.device_id = device_id;
			var settings = ajax_package(base_url+"info/get_weather",
				sendData,
				function(data,textStatus) {
					if (textStatus == "success") {
						if (data) {
							var contentStr = "";
							contentStr += '<div>';
							contentStr += '<img src="'+ getWeatherImage(data.icon_url) +'">';
							contentStr += '<p>'+data.text + ',' + data.temperature+'℃</p>';
							contentStr += '</div>';
							$("#menu").append(contentStr);
						}
					}

				});
			$.ajax(settings);
		}
	</script>
	<script type="text/javascript" src="js/index.js"></script>
</body>
</html>